<script setup lang="ts">

import { CaptchaApi, type LoginRO} from '@/api'
import {authService} from '@/service/AuthService'

import {AiOutlineHome} from "vue-icons-plus/ai";
import {RiCompassDiscoverFill} from "vue-icons-plus/ri";
import {BsFileEarmarkText} from "vue-icons-plus/bs";
import {BsPerson} from "vue-icons-plus/bs";

const form = ref<LoginRO>({
  username: '',
  password: '',
  captcha: {
    id: '',
    value: ''
  }
})

const router = useRouter()
const captchaImg = ref<string>()
const captchaApi = new CaptchaApi()
const errorMsg = ref<string>()
const needCatpcha = ref(false)
const errorCount = ref(0)

function loadCaptcha(){
  captchaApi.getCaptcha().then((response) => {
    captchaImg.value = response.data.imageBase64
    form.value.captcha!.id = response.data.id
  })
}

function login() {
  if (!form.value.username && !form.value.password) {
    errorMsg.value = "用户名和密码不能为空"
    return
  }
  if (form.value.username && !form.value.password) {
    errorMsg.value = "密码不能为空"
    return
  }if (!form.value.username && form.value.password) {
    errorMsg.value = "用户名不能为空"
    return
  }
  if (form.value.username) {
    sessionStorage.setItem('username', form.value.username);
  }
  authService.login(form.value).then((response) => {
    errorMsg.value = ""
    errorCount.value = 0
    router.push('/')
  }).catch((err)=>{
    let errData = err.response.data
    if(errData.type == "LOGIN_CAPTCHA_ERROR"){
      needCatpcha.value = true
    }
    if (needCatpcha.value) {
      loadCaptcha()
    }
    errorMsg.value = errData.message
    errorCount.value += 1
    if (errorCount.value >= 3) {
      needCatpcha.value = true
      loadCaptcha()
    }
  })
}

function register() {
  router.push({ name: 'registration' });
}

</script>

<template>
  <div class="w-full h-full">
    <header class="w-full h-12vw bg-#0097FF flex items-center justify-center pos-fixed left-0 top-0 z-100">
      <p class="color-#fff text-4.8vw" style="user-select: none">用户登录</p>
    </header>
  <div class="w-full mt-12vw items-center justify-center pos-fixed">
      <div class="pr-12vw pl-0 pb-0 pt-5vw " style="user-select: none">
        <ElForm :model="form" label-width="5em">
          <ElFormItem label="用户名:" class=" font-700 color-#666 ">
            <ElInput v-model="form.username" placeholder="用户名(手机号码)"/>
          </ElFormItem>
          <ElFormItem label="密码:" class="font-700 color-#666">
            <ElInput v-model="form.password" placeholder="密码" />
          </ElFormItem>
          <ElFormItem label="验证码" v-if="needCatpcha" class="font-700 color-#666">
            <ElRow>
              <ElCol :span="10">
                <ElInput v-model="form.captcha!.value" placeholder="验证码" />
              </ElCol>
              <ElCol :span="8" :offset="1">
                <img :src=captchaImg alt="验证码" class="w-100px h-30px" @click="loadCaptcha()"/>
              </ElCol>
            </ElRow>
          </ElFormItem>
          <ElFormItem v-if="errorMsg" label="">
            <div class="text-red-500">{{errorMsg}}</div>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" @click="login" style="background: #38CA73; height:10vw;font-size:3.8vw; color: #fff;border-radius: 4px;border: none;outline: none" class="w-full">登录</ElButton>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" @click="register" style="background: #EEE; height:10vw;font-size:3.8vw; color: #333;border-radius: 4px;border: none;outline: none" class="w-full">注册</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
  </div>
   <ul class="footer w-full h-14vw flex items-center justify-around pos-fixed left-0 bottom-0 border-solid border-t-1px border-#DDD">
     <li>
       <AiOutlineHome></AiOutlineHome>
       <p>首页</p>
     </li>
     <li>
       <RiCompassDiscoverFill></RiCompassDiscoverFill>
       <p>发现</p>
     </li>
     <li >
       <BsFileEarmarkText></BsFileEarmarkText>
       <p>订单</p>
     </li>
     <li>
       <BsPerson></BsPerson>
       <p>我的</p>
     </li>
   </ul>
  </div>
</template>

<style scoped>
.footer li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}
.footer li p{
  font-size: 2.8vw;
}
</style>
